import React, { Component } from 'react'
import { Checkbox, Button } from 'antd';
import './index.css'
export default class Footer extends Component {
    handleCheck = (e) => {
        this.props.handleCheckALL(e.target.checked);
    }
    deleteFinished = () => {
        this.props.deleteFinished()
    }
    render() {
        const { todos } = this.props;
        const finishCount = todos.filter(todo => todo.done).length
        return (
            <div className="Footer" >
                <div className="footer-left">
                    <Checkbox checked={finishCount === todos.length && todos.length !== 0} onChange={this.handleCheck}>
                        Finished{finishCount} / All{todos.length}
                    </Checkbox>
                </div>
                <Button type="primary" onClick={this.deleteFinished} danger>clear finished task</Button>
            </div>
        )
    }
}
